<template>
  <div>
 <!--    表单区域-->
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="width: 500px">
      <el-form-item label="演员名称" prop="actorName">
        <el-input v-model="form.actorName"></el-input>
      </el-form-item>
      <el-form-item label="演员头像" prop="actorAvatar">
        <el-upload
            class="avatar-uploader"
            action="http://localhost:9000/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即新增</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
      data() {
    return {
      imageUrl:'',
      form: {
        actorName: '',   //绑定演员名字
        actorAvatar:'',  //绑定演员头像
      },
      rules:{
        actorName:[ { required: true, message: '请输入演员姓名', trigger: 'blur' },],
        actorAvatar:[ { required: true, message: '请选择演员头像', trigger: 'blur' },],
      }
    }
  },
  methods:{
      onSubmit(){
          this.$refs.form.validate((valid) => {
            if(!valid) return;
            let newForm =  this.qs.stringify(this.form)
            this.$http.post("/movie-actor/add",newForm).then(res=>{
              if(res.data.code===200){
                this.$message.success("新增成功")
                this.$router.push("/home/actor-list")
              }else{
                    this.$message.error("增加失败")
              }
              
            })
        });
      },
      handleAvatarSuccess(res){
          console.log(res,"上传成功")
          this.imageUrl = res.data;
          this.form.actorAvatar = res.data;
  
      },
      beforeAvatarUpload(file){
        console.log(file,'1234')
       const isjpg = file.type === 'image/jpeg'
       if(!isjpg){
        this.$message.error("上传头像只能是jpeg格式")
       }
      const is2M =  file.size/1024/1024<2
      if(!is2M){
          this.$message.error("头像大小只能是2MB")
      }
        return isjpg&&is2M;
      }
  }
  }
</script>

<style lang="scss" scoped>

</style>
<style lang="scss" scoped>
 
</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
</style>